<template>
  <div id="order-expresss-box">
    <div class="type-list" v-if="checkIsTypeArr">
      <div class="item" v-for="(name,index) in expressTypeNameArr" :key="index" v-if="allExpressList[index] && allExpressList[index].length>0">
        <div class="name" v-text="name+':'"></div>
        <div class="value">
          <span
            @click="reloadDetail(_item)"
            v-text="_item.expressCompany+'-'+_item.expressNumber"
            :class="{curr:_item.expressNumber===detail.expressNumber}"
            v-for="(_item,_index) in allExpressList[index]"
            :key="_index"></span>
        </div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>
    <div style="text-align: center; margin-top: 10px">
      <express-table-item style="display: inline-block;" :curr-express="detail"/>
    </div>
    <div class="custom-table custom-table-2">
      <div class="row">
        <div class="left">物流公司:</div>
        <div class="right" v-text="detail.expressCompany"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">物流单号:</div>
        <div class="right" v-text="detail.expressNumber"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">发货时间:</div>
        <div class="right" v-text="detail.createdTime"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">当前状态:</div>
        <div class="right" v-text="detail.tagName"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">发件人-姓名&电话:</div>
        <div class="right" v-text="detail.senderName+','+detail.senderMobile"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">发件人-详细地址:</div>
        <div class="right" v-text="detail.senderAddress"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">收件人-姓名&电话:</div>
        <div class="right" v-text="detail.receiverName+','+detail.receiverMobile"></div>
        <div class="c"></div>
      </div>
      <div class="row">
        <div class="left">收件人-详细地址:</div>
        <div class="right" v-text="detail.receiverAddress"></div>
        <div class="c"></div>
      </div>
      <div class="c"></div>
    </div>
    <express-item-list :express-list="detail.content"/>
  </div>
</template>

<script>
import ExpressTableItem from './ExpressTableItem'
import ExpressItemList from './ExpressItemList'
export default {
  name: 'OrderExpressBox',
  components: {ExpressItemList, ExpressTableItem},
  props:{
    callReloadDetail:Function,
    detail:Object,
    allExpressList:Object
  },
  data:function () {
    return {
      typeList:[],
      expressTypeNameArr:dict.OrderExpressTypeArr
    }
  },
  mounted () {

  },
  methods:{
    checkIsTypeArr:function () {
      return Object.keys(this.$props.allExpressList).length>0
    },
    reloadDetail:function (item) {
      if (item.expressNumber===this.detail.expressNumber){
        return
      }
      this.$props.callReloadDetail(item.id)
    }
  }
}
</script>

<style scoped>

</style>
